<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>两栏布局</title>
		<style type="text/css">
			.left1 {
				height: 200px;
    			width: 200px;
    			float: left;
    			background-color: red;
			}
			.right1 {
			    height: 200px;
			    overflow: hidden;
    			background-color: blue;
			}
			.left2 {
				height: 200px;
				position:absolute;
			    width:200px;
			    background-color:green;
			}
			.right2 {
			    height: 200px;
			    padding-left:200px;
			    background-color:yellow;
			}
			.left3 {
				
    			height: 200px;
			    overflow: hidden;
    			background-color: blue;
			}
			.right3 {
			    height: 200px;
    			width: 200px;
    			float: right;
    			background-color: red;
			}
		</style>
	</head>
	<body>
		<h1><dl>
			<dt>两种常见的两栏布局方式</dt>
			<dd>1.利用左浮动，左边固定宽，右边自适应</dd>
			<dd>2.左边绝对定位到左边，右边空出左边宽的padding-left</dd>
		</dl></h1>
		
		<!--利用左浮动，左边固定宽，右边自适应-->
		<div class="left1">
			左
		</div>
		<div class="right1">
			右
		</div>
		<!--左边绝对定位到左边，右边空出左边宽的padding-left-->
		<div class="left2">
			左
		</div>
		<div class="right2">
			右
		</div>
		<div class="right3">
			右
		</div>
		<div class="left3">
			左
		</div>
		
	</body>
</html>
